<template>
    <div>
        <el-card class="head">
            <!-- 文章管理 - 专题ID: {{ topicId }} -->
            <el-button
                type="primary"
                @click="
                    plusAirtle();
                    dialogFormVisible = true;
                "
            >
                <el-icon><Plus /></el-icon>新增文章
            </el-button>
        </el-card>

        <el-card v-for="item in ArticleData" :key="item.article_id" class="article-card" @click="Handle(item.articleId)">
            <div class="article-info">
                <h3 class="title">{{ item.title }}</h3>
                <div class="author">作者: {{ item.author }}</div>
                <div class="content">{{ item.content }}</div>
                <div class="article-status">状态：{{ item.status === 1 ? "已启用" : "已禁用" }}</div>
            </div>
        </el-card>

        <!-- 新增文章表单 -->
        <el-dialog v-model="dialogFormVisible" title="新增文章" width="500">
            <el-form :model="form">
                <el-form-item label="标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off" />
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.author" autocomplete="off" />
                </el-form-item>
                <el-form-item label="内容" :label-width="formLabelWidth">
                    <el-input v-model="form.content" type="textarea" :rows="6" :autosize="{ minRows: 6, maxRows: 12 }" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        @click="
                            resetUpload();
                            dialogFormVisible = false;
                        "
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        @click="
                            dialogFormVisible = false;
                            ConfirmBtn();
                        "
                        >确认</el-button
                    >
                </div>
            </template>
        </el-dialog>

        <!-- 编辑文章表单 -->
        <el-dialog v-model="HandleFormVisible" width="500">
            <el-form-item label="是否要删除文章" :label-width="150"> </el-form-item>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="HandleFormVisible = false">取消</el-button>
                    <el-button
                        type="primary"
                        @click="
                            HandleFormVisible = false;
                            hide();
                        "
                        >确认</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { getArticleAPI, postAddArticle, postHideArticleAPI, postRecoverArticleAPI } from "@/api/community";
import { onMounted, ref, reactive, watch } from "vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const topicId = route.params.topicId;

const ArticleData = ref([]);
const getArticle = async () => {
    const res = await getArticleAPI(topicId);
    ArticleData.value = res.data.items;
    // console.log(ArticleData.value)
};

const plusAirtle = () => {
    console.log("点击新增按钮");
    // 弹窗
    dialogFormVisible.value = true;
};

// 新增表单-逻辑代码
const formLabelWidth = "50px"; //输入框标题宽度
const dialogFormVisible = ref(false);
// 新增表单-数据存储
const form = reactive({
    topicId: topicId,
    title: "", //标题
    author: "", //作者
    content: "", //内容
});
// 新增表单-清除按钮-清空表单
const resetUpload = () => {
    form.title = "";
    form.author = "";
    form.content = "";
};
//新增表单-确认按钮
const ConfirmBtn = async () => {
    console.log("确认按钮，表单数据：", form);

    if (form.author && form.content && form.title) {
        const res = await postAddArticle(form);
        if (res.data === "添加成功") {
            ElMessage.success("添加成功");
            getArticle();
            resetUpload();
        } else {
            ElMessage.error("添加失败");
        }
    } else {
        ElMessage.warning("请完善表单信息");
    }
};

const currentArticleId = ref("");
// 操作表单
const HandleFormVisible = ref(false);
const Handle = (articleId) => {
    currentArticleId.value = articleId;

    HandleFormVisible.value = true;

    console.log("当前文章ID:", currentArticleId.value);
};

const hide = async () => {
    console.log("隐藏当前文章ID:", currentArticleId.value);
    const res = await postHideArticleAPI(currentArticleId.value);
    console.log(res);

    if (res.message === "成功") {
        ElMessage.success("删除文章成功");
        getArticle();
    } else {
        ElMessage.error("删除文章失败");
    }
};

onMounted(() => {
    getArticle();
});
</script>

<style scoped>
.head {
    margin-bottom: 20px;
}

.article-card {
    margin-bottom: 15px;
    transition: all 0.3s ease;
    transform: translateY(0);
}
.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}
.article-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.article-status {
    font-size: 12px;
    color: #909399;
    margin-top: 8px;
}
</style>
